<template>
  <div class="cart">
    <Tips />
    <!-- 购物车-商品列表 -->
    <van-checkbox-group v-model="checkedGoods" :disabled="isEditing">
      <van-checkbox
        :name="item.id"
        v-for="item in cartList" :key="item.id"
        @click="changeChecked(item)"
      >
        <van-swipe-cell>
          <van-card
            :num="item.number"
            :price="item.retail_price"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
          />
          <van-stepper v-show="isEditing" v-model="item.number" @change="stepperChange(item)" />
        <template #right>
          <van-button square type="danger" text="删除" @click="deleteGood(item.product_id)" />
        </template>
      </van-swipe-cell>
      </van-checkbox>
    </van-checkbox-group>
    <!-- 购物车-提交栏 -->
    <van-submit-bar :price="cartTotal.checkedGoodsAmount * 100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checkedAll" :disabled="isEditing">全选</van-checkbox>
      <template #tip>
        累计共{{ cartTotal.checkedGoodsCount }}件商品，可点击
         <span @click="onClickEditAddress" style="color: red; font-weight: 600; text-decoration: underline;">{{ isEditing ? '确认修改' : '编辑修改' }}</span>
         进行商品数量进行修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import Tips from '@/components/Tips.vue'
import { GetCartListData, ChangeGoodsChecked, StepperChangeData, DeleteGood } from '@/utils/api.js'
export default {
  name: 'Cart',
  components: {
    Tips
  },
  props: [],
  data () {
    return {
      // * 商品单选(展示选中的元素的数组)
      // * 哪一个商品的 checked 的值为1，就可以把它的 id 添加到这个数组
      checkedGoods: [],
      // * 商品全选 checked
      checked: true,
      // * 购物车列表数据
      cartList: [],
      // * 购物车商品总信息
      cartTotal: [],
      // * 购物车编辑状态设置
      isEditing: false
    }
  },
  computed: {
    // ! 如果要弄成 get/set 的形式，需要弄成对象的格式
    checkedAll: { // 全选按钮的 get()/set()
      // ? 什么时候可以表示全选？
      // * 当 checkedGoods[] 的长度和 cartList[] 的长度一样的时候表示全选
      get () {
        return this.checkedGoods.length === this.cartList.length
      },
      set (value) { // * value 为即将要修改的新的值(原先是 false 想要改成 true，这里的 value 就是 true)
        // * 处理 id，创建购物车全选列表(用于全选判断)
        const totalIdArr = []
        this.cartList.map(item => {
          totalIdArr.push(item.product_id)
        })
        ChangeGoodsChecked({
          isChecked: value ? 1 : 0,
          productIds: totalIdArr.join()
        }).then(response => {
          if (response.errno === 0) {
            this.renderCart(response.data)
          }
        }).catch(error => {
          console.log(error)
        })
      }
    }
  },
  created () {
    // * 获取购物车列表数据
    GetCartListData().then(response => {
      if (response.errno === 0) {
        console.log(response)
        this.renderCart(response.data)
      }
    })
  },
  mounted () {},
  watch: {},
  methods: {
    renderCart (data) { // 页面渲染函数
      // ! 首先要清空一下 this.checkedGoods[], 防止后面数量越来越多
      this.checkedGoods = []
      this.cartList = data.cartList // * 购物车列表数据 赋值
      this.cartTotal = data.cartTotal // * 购物车商品总信息 赋值
      // ? 遍历返回数组，当商品 checked === 1 时，加入 checkedGoods[] 里面
      this.cartList.map(item => {
        if (item.checked === 1) {
          this.checkedGoods.push(item.id)
        }
      })
    },
    onSubmit () {}, // 提交监听
    onClickEditAddress () { // 编辑按钮监听
      // 更改编辑状态
      this.isEditing = !this.isEditing
    },
    changeChecked (item) { // 购物车复选框监听
      // ! 需要做一个判断，是否正在进行编辑状态
      if (this.isEditing) return

      // ? 总结：为什么要发送这个请求？这个请求的作用？
      // * 这个请求告诉了后端我们改变了哪些值，后端接受到之后，返回给我们一个处理过后的完整的页面数据(包括总价的合)
      // * 我们只需要拿到这个数据，往页面上填写就可以(修改 cartList 和 cartTotal)
      ChangeGoodsChecked({
        // ! 这样处理性能太差(个人 opinion)
        isChecked: item.checked === 0 ? 1 : 0,
        productIds: item.product_id
      }).then(response => {
        if (response.errno === 0) {
          this.renderCart(response.data)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    stepperChange (item) { // 购物车步进器监听
      console.log(item)
      StepperChangeData({
        goodsId: item.goods_id,
        id: item.id,
        number: item.number,
        productId: item.product_id
      }).then(response => {
        if (response.errno === 0) {
          console.log(response)
          this.renderCart(response.data)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    deleteGood (pid) {
      DeleteGood({
        productIds: pid.toString() // 需要传递字符串
      }).then(response => {
        if (response.errno === 0) {
          console.log(response)
          this.renderCart(response.data)
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped lang='less'>
  .cart{
    font-size: .5rem;
  }
  .van-checkbox-group{
    background-color: #ffffff;
    padding-bottom: 3.58rem;
    /deep/.van-checkbox__label{
      flex: 1;
    }
    .van-checkbox{
      padding: 8px 10px;
      border-bottom: 1px solid #cccccc;
    }
    .van-card{
      border-radius: 10px;
      box-shadow: 0 0 1px 1px #cccccc;
    }
  }
  .van-submit-bar{
    margin-bottom: 1.31rem;
    border-bottom: 1px solid #cccccc;
  }
  .van-stepper{
    margin-top: 7px;
    text-align: right;
  }
  .van-button--square {
    font-size: .5rem;
    border-radius: 10px;
    height: 100%;
    width: 100%;
  }
</style>
